<template>
  <div class="change-security-phone-index full-padding all-screen" style>
             <news-page-header>修改登录手机</news-page-header>

    <!---->
    <div class="title weight">已绑定手机号</div>
    <div class="show-phone">手机号码：<span v-text="sohuPhone"></span></div>
    <div class="explain">该手机号码用于登录您的帐号。</div>
    <div class="back-button" @click="toSetPhone">修改登录手机</div>
    <div class="back-button" @click="toSaveCenter">返回安全中心</div>
  </div>
</template>

<script>
import newsPageHeader from "../news/newsPageHeader";

export default {
  data() {
    return {
       sohuPhone:''
    };
  },
  components: {
     newsPageHeader
  },
  methods: {
    toSetPhone(){
      this.$router.push({name:'setPhone'})
    }
    ,toSaveCenter(){
      this.$router.push({name:'saveCenter'})
    }
  },
  computed: {},
  watch: {},
  created() {
     let sohuPhone=localStorage.getItem("sohuPhone");
    this.sohuPhone=sohuPhone.replace(/^(\d{3})\d{6}(\d+)/,"$1******$2");
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .change-security-phone-index {
    z-index: 1;
}

.full-padding {
    padding: 1.66rem 0 0 .56rem;
    
}

.weight {
    font-weight: 900!important;
}
.title {
    font-size: 0.9rem;
    color: rgba(0,0,0,.7);
    letter-spacing: .39px;
    height: .48rem;
    line-height: .48rem;
    
}

 .show-phone {
    color: rgba(0,0,0,.7);
    letter-spacing: .28px;
    height: .2rem;
    line-height: .2rem;
    padding-top: 1.8rem;
    font-size: 0.6rem;
}

 .explain {
    padding-top: 1.2rem;
    font-size: 0.6rem;
    color: rgba(0,0,0,.4);
}

.back-button {
   padding-top: 1.2rem;
    font-size: 0.6rem;
    color: #fdb115;
    letter-spacing: .28px;
    height: .48rem;
    line-height: .48rem;
}
</style>
